<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车添加效果</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="container">
        <!-- 左边 start -->
        <ul class="left-container">
            <li index="0" class="active">商品分类1</li>
            <li index="1">商品分类2</li>
            <li index="2">商品分类3</li>
            <li index="3">商品分类4</li>
            <li index="4">商品分类5</li>
            <li index="5">商品分类6</li>
        </ul>
        <!-- 左边 end -->

        <!-- 右边 start -->
        <ul class="right-container">
            <li>
                <img class="img" src="img/1.webp" alt="">
                <div class="goods-info">
                    <div class="name">柚子有点皮</div>
                    <div class="number-box">
                        <div class="btn del">-</div>
                        <div class="numer">0</div>
                        <div index="0" class="btn active add">+</div>
                    </div>
                </div>
            </li>
            <li>
                <img class="img" src="img/1.webp" alt="">
                <div class="goods-info">
                    <div class="name">柚子有点皮</div>
                    <div class="number-box">
                        <div class="btn del">-</div>
                        <div class="numer">0</div>
                        <div index="1" class="btn active add">+</div>
                    </div>
                </div>
            </li>
            <li>
                <img class="img" src="img/1.webp" alt="">
                <div class="goods-info">
                    <div class="name">柚子有点皮</div>
                    <div class="number-box">
                        <div class="btn del">-</div>
                        <div class="numer">0</div>
                        <div index="2" class="btn active add">+</div>
                    </div>
                </div>
            </li>
            <li>
                <img class="img" src="img/1.webp" alt="">
                <div class="goods-info">
                    <div class="name">柚子有点皮</div>
                    <div class="number-box">
                        <div class="btn del">-</div>
                        <div class="numer">0</div>
                        <div index="3" class="btn active add">+</div>
                    </div>
                </div>
            </li>

        </ul>
        <!-- 右边 end -->
    </div>

    <!-- 底部 start -->
    <div class="bottom-footer">
        <div class="car-box">
            <img src="./img/1.png" alt="">
        </div>
    </div>
    <!-- 底部 end -->

    <!-- 曲线运动 start -->
    <!-- <div class="add-animation">
        <div class="btn">+</div>
    </div> -->
    <!-- 曲线运动 end -->
</body>
<script src="./index.js"></script>

</html>